<template>
  <div class='home'>
    <van-search
      v-model="search_value"
      @search="onSearch"
      placeholder="请输入搜索关键词"
      background="rgb(252, 140, 49)"
      shape="round"
    />
    <van-row>
      <van-col span="6" class="col_item" @click="skipTo('waitProcess')">
        <van-icon name="todo-list" :info="alreadyProcessNum" class="col_item_icon" color="rgb(255,120,10)" size="44px"/>
        <div class="col_item_name">待处理</div>
      </van-col>
      <van-col span="6" class="col_item" @click="skipTo('alreadyProcess')">
        <van-icon name="wechat" class="col_item_icon" color="rgb(255,120,10)" size="44px"/>
        <div class="col_item_name">已处理</div>
      </van-col>
      <van-col span="6" class="col_item" @click="skipTo('myInitiation')">
        <van-icon name="share" info="" class="col_item_icon" color="rgb(255,120,10)" size="44px"/>
        <div class="col_item_name">我发起的</div>
      </van-col>
      <van-col span="6" class="col_item" @click="skipTo('copyMe')">
        <van-icon name="column" :info="unReadNum" class="col_item_icon" color="rgb(255,120,10)" size="44px"/>
        <div class="col_item_name">抄送我的</div>
      </van-col>
    </van-row>

    <!-- 钉钉风格 -->

    <!-- <van-collapse v-model="activeName" class="collapse_item" v-for="(item,index) in work_order_list" :key="index">
      <van-collapse-item :title="item.name" :name="item.name" :value="activeName.includes(item.name)?'收起':'展开'">
        <van-row gutter="20">
          <van-col span="6" class="work_item" @click="skipTicket(work.id)" v-for="(work,key) in item.value" :key="key">
            <van-icon :name="work.img" class="work_item_icon" size="44px"/>
            <div class="work_item_name">{{work.name}}</div>
          </van-col>
        </van-row>
      </van-collapse-item>
    </van-collapse> -->

    <!-- 钉钉风格 -->

    <!-- 列表风格 -->
    <div class="list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="work_item" v-for="(item,index) in work_order_list" :key="index" @click="skipTicket(item.id,item.name)" >
          {{item.name}}
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // work_order_list需要最终数据包装
      work_order_list:[],
      activeName: [],
      search_value:'',
      loading: false,
      finished: false,
      alreadyProcessNum:'',
      unReadNum:'',
      page:1,
    }
  },
  created(){
    this.unfoldAll()
    this.changeInfoNum()
  },
  methods:{
    changeInfoNum(){
      let data = {
        category:'duty',
      }
      // 获取待处理工单列表总个数
      this.$store.dispatch('api_get_ticket_list',data).then(res=>{
        if( res.data.data.total > 0){
          this.alreadyProcessNum = res.data.data.total
        }
      })
      //获取抄送我的工单列表未读总个数
      data.category = 'all'
      data.cc = 'unread'
      this.$store.dispatch('api_get_ticket_list',data).then(res=>{
        if( res.data.data.total > 0){
          this.unReadNum = res.data.data.total
        }
      })
    },
    // 搜索
    onSearch(){
      // 暂时不可用搜索字段name
      let data = {
        page: 1,
        name: this.search_value,
      }
      this.$store.dispatch('api_workflows',data).then(res => {
        this.work_order_list = res.data.data.value
      }).catch(err=>{
        console.log(err)
      })
    },
    // 列表加载
    onLoad() {
      this.loading = true
      let data = {
        page:this.page,
        name: this.search_value,
      }
      this.$store.dispatch('api_workflows',data).then(res => {
        res.data.data.value.forEach(item=>{
          this.work_order_list.push(item)
        })
        this.loading = false
        this.page++

        // 数据全部加载完成
        if(this.work_order_list.length >=  res.data.data.total){
          this.finished = true;
        }
      }).catch(err=>{
        this.loading = false
        this.finished = true;
      })
    },
    // 跳转到...页面
    skipTo(router_name){
      this.$router.push({
        name:router_name
      })
    },
    // 默认全部展开(数据包装完成后调用)
    unfoldAll(){
      this.work_order_list.forEach(item=>{
        this.activeName.push(item.name)
      })
    },
    // 跳转到工单
    skipTicket(id,workflow_name){
      this.$router.push({
        name:'CreateTicket',
        query:{id,workflow_name}
      })
    }
  }
}
</script>

<style scoped lang="less">
.col_item{
  text-align: center;
  padding: 40px 0px 20px 0px;
  background-color: #fff;
  color: @button-color;
}
.collapse_item{
  margin-top: 20px;
}
// .work_item{
//   margin: 15px 0;
//   text-align: center;
//   color: @button-color;
//   font-size: 12px;
// }
.list{
  position: absolute;
  top: 180px;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgb(230, 227, 225);
  background-color: #fff;
  overflow: scroll;
  .work_item{
    color: rgb(252, 140, 49);
    margin: 0 8px;
    margin-top: 15px;
    border: 1px solid rgb(252, 140, 49);
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: rgb(252, 140, 49) 2px 2px 2px 2px;
  }
}
.list::-webkit-scrollbar{
  display:  none;
}
</style>
